<!--邮件附件组件-->
<template>
  <div class="attachment_li clearfix">
    <span class="tooltip tooltip-div iconfont icon-yulan"
          v-if="fileName && dataType.indexOf((fileName.split('.')[fileName.split('.').length -1]).toLowerCase()) > -1"
          @click.stop="showPdfOrMediaOrText({url: fileUrl, flag: 'pdf'})"></span>
    <span class="tooltip tooltip-div iconfont icon-yulan"
          v-if="fileName && dataType3.indexOf((fileName.split('.')[fileName.split('.').length -1]).toLowerCase()) > -1"
          @click.stop="showPdfOrMediaOrText({url: fileUrl, flag: 'video'})"></span>
    <span class="tooltip tooltip-div iconfont icon-yulan"
          v-if="fileName && dataType2.indexOf((fileName.split('.')[fileName.split('.').length -1]).toLowerCase()) > -1"
          @click.stop="showPdfOrMediaOrText({url: fileUrl, flag: 'audio'})"></span>
    <span class="tooltip tooltip-div iconfont icon-yulan"
          v-if="fileName && dataType1.indexOf((fileName.split('.')[fileName.split('.').length -1]).toLowerCase()) > -1"
          @click.stop="showPdfOrMediaOrText({url: fileUrl, flag: 'text'})"></span>
    <span class="tooltip tooltip-div iconfont icon-yulan"
          v-if="fileName && dataType4.indexOf((fileName.split('.')[fileName.split('.').length -1]).toLowerCase()) > -1"
          @click.stop="showPdfOrMediaOrText({url: 'https://view.officeapps.live.com/op/view.aspx?src=' + fileUrl, flag: 'pdf'})"></span>
    <!--<a :href="fileUrl" v-if="fileName && dataType.indexOf((fileName.split('.')[fileName.split('.').length -1]).toLowerCase()) > -1" target="_blank" class="tooltip tooltip-div iconfont icon-yulan"></a>-->
    <span class="tooltip tooltip-div iconfont icon-yulan"
          v-if="checkImg(fileName.replace(/\s/g, ''))"
          @click.stop="showBigImage(fileUrl)"></span>
    <span :class="className"></span>
    <div class="attachment_li_span">
      <span class="attachment_name" :title="fileName">{{fileName}}
      </span>
      <span class="attachment_download">
        <a class="iconfont icon-xiazai"
           :name="fileName.replace(/\s/g, '')"
           :id="fileUrl"
           :class="checkImg(fileName.replace(/\s/g, '')) ? 'imgA' : ''"
           :href="fileUrl" :download="fileName"></a>
      </span>
    </div>
  </div>
</template>
<script type="text/javascript">
  import {checkform} from '@/utils/validate'
  import { commitPdfOrMediaOrText } from '@/utils/publicMethod.js'
  export default {
    name: 'EmailAttachment',
    data () {
      return {
        dataType4: ['doc', 'xls', 'ppt', 'docx', 'xlsx', 'pptx'],
        dataType3: ['mp4'],
        dataType2: ['mp3', 'wav', 'ogg'],
        dataType1: ['txt', 'TXT'],
        dataType: ['pdf', 'PDF']
      }
    },
    props: {
      fileName: String,
      fileUrl: String
    },
    methods: {
      // 预览音频、视频、文本、pdf
      showPdfOrMediaOrText (data) {
        commitPdfOrMediaOrText(data)
      },
      checkImg (value) {
        if (checkform(value, 'ImgNew')) {
          return false
        } else {
          return true
        }
      },
      showBigImage (data) {
        this.$emit('emailCommentBigImg', data)
//        let msg = {
//          show: true,
//          url: data
//        }
//        this.$store.commit(types.SET_BIGIMG, msg)
      }
    },
    computed: {
      className () {
        let types = this.fileName.split('.')
        let fileNameNew = types[types.length - 1]
        let className = ''
        if (fileNameNew === 'png' || fileNameNew === 'bmp' || fileNameNew === 'BMP' || fileNameNew === 'PNG' || fileNameNew === 'gif' || fileNameNew === 'GIF' || fileNameNew === 'jpg' || fileNameNew === 'JPG' || fileNameNew === 'jpeg' || fileNameNew === 'JPEG') {
          className = 'attachment_img iconfont icon-youjianxiangqingtupian'
        } else if (fileNameNew === 'zip' || fileNameNew === 'rar' || fileNameNew === '7z' || fileNameNew === 'cab' || fileNameNew === 'iso') {
          className = 'attachment_img iconfont icon-youjianxiangqingzip'
        } else if (fileNameNew === 'docx' || fileNameNew === 'doc') {
          className = 'attachment_img iconfont icon-youjianxiangqingword'
        } else if (fileNameNew === 'xls' || fileNameNew === 'xlsx') {
          className = 'attachment_img iconfont icon-youjianxiangqingExcle'
        } else if (fileNameNew === 'pdf') {
          className = 'attachment_img iconfont icon-youjianxiangqingpdf'
        } else if (fileNameNew === 'ppt' || fileNameNew === 'pps' || fileNameNew === 'pptx') {
          className = 'attachment_img iconfont icon-youjianxiangqingPPT'
        } else {
          className = 'attachment_img iconfont icon-youjianxiangqingweizhi'
        }
        return className
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .icon-yulan
     color #fff
  .icon-yulan:before
     padding-left 23px
  .attachment_li
    line-height 40px
    height 40px
    background $c-bus-back
    float left
    margin 0 10px 10px 0
    position relative
    .attachment_li_span
      display inline-block
      height 40px
      line-height 40px
    .attachment_img
      float left
      display inline-block
      height 40px
      width 40px
      color $cf-white
      font-size 40px
    .icon-youjianxiangqingtupian
      background #eeb958
    .icon-youjianxiangqingzip
      background #ed9b5a
    .icon-youjianxiangqingword
      background #539eff
    .icon-youjianxiangqingExcle
      background #1bbb9e
    .icon-youjianxiangqingpdf
      background #ee5771
    .icon-youjianxiangqingPPT
      background #ee7559
    .icon-youjianxiangqingweizhi
      background #4ba7cd
  .attachment_name
    margin-left 6px
    margin-left 6px
    width 90px
    overflow hidden
    display inline-block
    white-space nowrap
    text-overflow ellipsis
    text-align left
  .tooltip-div
    position: absolute
    left: 0;
    padding-left 35px
  .tooltip
    visibility hidden
    width 95px
    background rgba(0,0,0,0.6)
  .attachment_li:hover
    .tooltip
      visibility visible
      cursor pointer
  .attachment_download
    display inline-block
    vertical-align top
    margin-right 6px
</style>
